import { Button, message, Image, Input, Upload } from 'antd'
import React, { useRef, useState } from 'react'
import { FileAddFilled,LoadingOutlined, PlusOutlined  } from '@ant-design/icons'
import { addBannerFn } from '../../api/banner'

export default function Add() {
  const inpRef = useRef()
  const [imgSrc, setImgSrc] = useState('https://www.17sucai.com/statics/images/loading2.gif')
  const [alt, setAlt] = useState('')
  const [link, setLink] = useState('')

  // 图片也可以通过腾讯云暂存后拿出

  // 选择文件上传
  const changeFileFn = (file) => {
    // console.log(file);
    if (file.type.indexOf('image') == -1) {
      // 不是图片
      message.error('请选择图片')
      return
    }
    // 图片显示两种方法
    // 1.使用临时url地址
    // setImgSrc(URL.createObjectURL(file))
    // 2.转为base64
    // 创建文件加载器
    const reader = new FileReader()
    // 加载图片作为数据源
    reader.readAsDataURL(file)
    // 监听加载完成
    reader.onload = function () {
      setImgSrc(reader.result)
    }
  }

// 提交按钮事件
  function onSubmitFn() {
    // console.log(imgSrc,alt, link);
    addBannerFn({ img: imgSrc, alt, link }).then(res => {
      console.log(res);
      if (res.code == 200) {
        message.success('上传成功')
        // 清空数据
        setImgSrc('https://www.17sucai.com/statics/images/loading2.gif')
        setAlt('')
        setLink('')
      }
    })
  }

  // -------------------添加按钮-------------------

  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();

  const uploadButton = (
    <button style={{ border: 0, background: 'none' }} type="button">
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>点击选择文件</div>
    </button>
  );

  // -------------------添加按钮-------------------
  return (
    <div>
      <Upload
        name="img1"
        listType="picture-card"
        className="myuploader"
        maxCount={1}
        beforeUpload={changeFileFn}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
      </Upload>

      <hr />
      <input hidden ref={inpRef} type="file" onChange={(e) => {
        changeFileFn(e.target.files[0])
      }} />
      <Button icon={<FileAddFilled />} onClick={() => {
        inpRef.current.click()
      }}>选择文件</Button>
      <br />
      <Image style={{ width: '100px', margin: "10px 0" }} src={imgSrc}></Image>
      <br />
      <Input style={{ margin: "10px 0" }} value={alt} onChange={(e) => {
        setAlt(e.target.value)
      }} placeholder='请输入alt' type='text'></Input>
      <Input style={{ margin: "10px 0" }} value={link} onChange={(e) => {
        setLink(e.target.value)
      }} placeholder='请输入link' type='text'></Input>
      <Button onClick={() => {
        onSubmitFn()
      }}>上传</Button>
    </div>
  )
}
